<script setup lang="ts">
import * as echarts from 'echarts'
import {ref,onMounted} from 'vue';
let people = ref('245083人')
//水球图拓展插件
import 'echarts-liquidfill'

//获得echarts类的实例
let charts = ref();
onMounted(()=>{
    let mycharts = echarts.init(charts.value);
    mycharts.setOption({
        //标题
        title:{
            text:'水球图',
            textStyle:{
                color: "rgba(255, 255, 255, 1)"
            }
        },
        //x轴、y轴
        xAxis:{
            show:false
        },
        yAxis:{
            show:false
        },
        //系列，决定你展示什么样的图表
        series:{
            type:'liquidFill',//类型
            data:[0.6,0.4,0.2],//数据
            waveAnimation:true,//动画
            animationDuration:3,//时间
            animationDurationUpdate:0,
            radius:'100%', //半径      
        },
        outline:{
            show:true,
            borderDistance:8,
            itemStyle:{
                color:'none',
                borderColor:'#294D99',
                borderWidth:8,
                shadowBlur:20,
                shadowColor:'rgba(0,0,0,0.25)'
            }
        },
        //布局组件
        grid:{}
    })
})


</script>

<template>
    <div class="box">
        <div class="top">
            <p class="title">实时游客统计</p>
            <p class="bg"></p>
            <p class="right">可预约总量<span>9999</span>人</p>
        </div>
        <div class="number">
            <span v-for="(item,index) in people" :key="index">{{ item }}</span>
        </div>
        <!-- 将来echarts展示图形图标的节点 -->
        <div class="charts" ref="charts">123</div>
    </div>

</template>

<style scoped lang="scss">
.box {
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;

    .top {
        margin-left: 20px;

        .title {
            color: white;
            font-size: 20px;

        }

        .bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png);
            background-size: 100% 100%;
            margin-top: 10px;
        }
        .right{
            float: right;
            color: white;
            font-size: 20px;
            span{
                color: yellowgreen;
            }
        }
    }
    .number{
        padding: 10px;
        margin-top: 30px;
        display: flex;
        span{
            flex: 1;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: url(../../images/total.png) no-repeat;
            background-size: 100% 100%;
            color: #29fcff;
        }
    }
    .charts{
        width: 100%;
        height: 250px;
    }
}
</style>